import { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import './Login.css';

function Login() {
    // 假数据
    const demoUsers = [
        { username: 'admin', password: 'gf123456', role: '管理员' },
    ];
    
    const navigate = useNavigate();
    
    const [formData, setFormData] = useState({
        username: '',
        password: '',
        rememberMe: false
    });
    
    const [errors, setErrors] = useState({
        username: '',
        password: ''
    });
    
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value, type, checked } = e.target;
        setFormData({
            ...formData,
            [name]: type === 'checkbox' ? checked : value
        });
        
        // 清除对应字段的错误信息
        if (errors[name as keyof typeof errors]) {
            setErrors({
                ...errors,
                [name]: ''
            });
        }
    };
    
    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        
        // 表单验证
        let valid = true;
        const newErrors = { username: '', password: '' };
        
        if (!formData.username.trim()) {
            newErrors.username = '请输入用户名';
            valid = false;
        }
        
        if (!formData.password) {
            newErrors.password = '请输入密码';
            valid = false;
        }
        
        setErrors(newErrors);
        
        if (valid) {
            // 检查用户是否存在
            const user = demoUsers.find(u => 
                u.username === formData.username && 
                u.password === formData.password
            );
            
            if (user) {
                navigate('/');
            } else {
                // 登录失败
                alert('用户名或密码错误，请重试');
            }
        }
    };
    
    const handleDemoLogin = (username: string, password: string) => {
        setFormData({
            ...formData,
            username,
            password
        });
    };
    
    return (
        <div className="login-page">
            <div className="login-container">
                <div className="login-header">
                    <h1>用户登录</h1>
                    <p>欢迎回来，请登录您的账户</p>
                </div>
                
                <form className="login-form" onSubmit={handleSubmit}>
                    <div className="form-group">
                        <label htmlFor="username">用户名</label>
                        <input
                            type="text"
                            id="username"
                            name="username"
                            value={formData.username}
                            onChange={handleChange}
                            placeholder="请输入用户名"
                        />
                        {errors.username && <span className="error-message">{errors.username}</span>}
                    </div>
                    
                    <div className="form-group">
                        <label htmlFor="password">密码</label>
                        <input
                            type="password"
                            id="password"
                            name="password"
                            value={formData.password}
                            onChange={handleChange}
                            placeholder="请输入密码"
                        />
                        {errors.password && <span className="error-message">{errors.password}</span>}
                    </div>
                    
                    <div className="form-options">
                        <div className="remember-me">
                            <input
                                type="checkbox"
                                id="rememberMe"
                                name="rememberMe"
                                checked={formData.rememberMe}
                                onChange={handleChange}
                            />
                            <label htmlFor="rememberMe">记住我</label>
                        </div>
                        <Link to="/forgot-password" className="forgot-password">忘记密码?</Link>
                    </div>
                    
                    <button type="submit" className="login-button">登录</button>
                </form>
                
                <div className="demo-accounts">
                    <p>测试账户：</p>
                    <div className="demo-list">
                        {demoUsers.map((user, index) => (
                            <div 
                                key={index} 
                                className="demo-account" 
                                onClick={() => handleDemoLogin(user.username, user.password)}
                            >
                                <span className="demo-username">{user.username}</span>
                                <span className="demo-password">密码: {user.password}</span>
                                <span className="demo-role">({user.role})</span>
                            </div>
                        ))}
                    </div>
                </div>
                
                <div className="login-footer">
                    <p>还没有账户? <Link to="/register">立即注册</Link></p>
                </div>
            </div>
        </div>
    );
}

export default Login;